<template>
  <div class="infomation">
    <a-form-model
      ref="ruleForm"
      :model="queryParam"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="上课模式" prop="model">
        <a-radio-group v-model="queryParam.model" @change="modelChange">
          <a-radio :value="item.value" v-for="(item, index) in classModel" :key="index">
            {{ item.label }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item ref="name" label="商品名称" prop="name" class="tip-name">
        <a-input v-model="queryParam.name" placeholder="请输入商品名称" />
        <span class="tip">商品名称会在学员端展示，需谨慎填写</span>
      </a-form-model-item>
      <a-form-model-item label="课程目录" prop="directory">
        <a-cascader
          :field-names="{ label: 'value', value: 'id', children: 'children' }"
          :options="directoryOptions"
          :load-data="loadData"
          placeholder="请选择课程目录"
          change-on-select
          @change="getType"
          v-model="queryParam.directory"
        />
      </a-form-model-item>
      <a-form-model-item label="课程类型" prop="kcType">
        <a-select v-model="queryParam.kcType" placeholder="请选择课程类型">
          <a-select-option :key="item.typeId" :value="item.typeId" v-for="item in typeList">
            {{ item.typeName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="商品属性" prop="attr">
        <a-radio-group v-model="queryParam.attr">
          <a-radio :value="item.value" v-for="item in attrList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否高端班" prop="highClass">
        <a-radio-group v-model="queryParam.highClass">
          <a-radio :value="item.value" v-for="item in classList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否低价课" prop="lowClass">
        <a-radio-group v-model="queryParam.lowClass">
          <a-radio :value="item.value" v-for="item in classList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="产品类型" prop="cpType">
        <a-radio-group v-model="queryParam.cpType">
          <a-radio :value="item.value" v-for="item in cpTypeList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="所属机构" prop="affiliation">
        <a-select v-model="queryParam.affiliation" placeholder="请选择所属机构">
          <a-select-option
            :value="item.jiGouTableId"
            :key="item.jiGouTableId"
            v-for="item in affiliationList"
          >
            {{ item.jiGouName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input v-model="queryParam.sort" placeholder="请输入排序" @keyup="numbers" />
      </a-form-model-item>
      <a-form-model-item label="仓库状态" prop="status">
        <a-radio-group v-model="queryParam.status">
          <a-radio :value="item.value" v-for="item in statusList" :key="item.value">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="销售渠道" prop="channel">
        <a-checkbox-group v-model="queryParam.channel" :options="channelList" />
      </a-form-model-item>
      <a-form-model-item label="自动上架时间">
        <a-date-picker
          show-time
          :disabled-date="disabledDate"
          format="YYYY-MM-DD HH:mm:ss"
          v-model="queryParam.autoDate"
          placeholder="请选择自动上架时间"
          @change="dateTime"
        />
      </a-form-model-item>
      <div style="text-align: center">
        <a-button type="primary" @click="nextStep"> 下一步 </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
import moment from 'moment'
import { directory, affiliation, goodsType, editCopy } from '@/api/product/goods'
export default {
  data () {
    return {
      moment,
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      directoryOptions: [],
      queryParam: {
        model: 0,
        name: '',
        directory: [],
        kcType: undefined,
        attr: 0,
        highClass: 0,
        lowClass: 0,
        cpType: 2,
        affiliation: undefined,
        sort: '',
        status: 1,
        channel: [],
        autoDate: ''
      },
      rules: {
        model: [{ required: true, message: '请选择上课模式', trigger: 'change' }],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        directory: [{ required: true, message: '请选择课程目录', trigger: 'change' }],
        kcType: [{ required: true, message: '请选择课程类型', trigger: 'change' }],
        attr: [{ required: true, message: '请选择商品属性', trigger: 'change' }],
        highClass: [{ required: true, message: '请选择是否高端班', trigger: 'change' }],
        lowClass: [{ required: true, message: '请选择是否低价课', trigger: 'change' }],
        cpType: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
        affiliation: [{ required: true, message: '请选择所属机构', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        status: [{ required: true, message: '请选择仓库状态', trigger: 'change' }],
        channel: [{ required: true, message: '请选择销售渠道', trigger: 'change' }]
      },
      classModel: [{
        label: '常规模式',
        value: 0
      }, {
        label: '约课模式',
        value: 1
      }],
      typeList: [],
      attrList: [{
        label: '全科',
        value: 0
      }, {
        label: '单科',
        value: 1
      }],
      classList: [{
        label: '否',
        value: 0
      }, {
        label: '是',
        value: 1
      }],
      cpTypeList: [{
        label: '商品',
        value: 2
      }, {
        label: '学费',
        value: 4
      }, {
        label: '代缴费',
        value: 10
      }],
      affiliationList: [],
      statusList: [{
        label: '上架',
        value: 1
      },
      {
        label: '下架',
        value: 0
      }],
      channelList: [{
        label: '电商渠道',
        value: 1
      },
      {
        label: '主站渠道',
        value: 2
      },
      {
        label: 'APP渠道',
        value: 3
      }],
      oldExamId: ''
    }
  },
  watch: {
  },
  mounted () {
    this.getDirectory()
    this.getAffiliation()
    if (this.params.edit) {
      this.packageId = this.params.packageId
      this.getData()
    }
    console.log(JSON.parse(localStorage.getItem('info')))
    this.queryParam = JSON.parse(localStorage.getItem('info')) || this.queryParam
    console.log(this.queryParam)
    this.getType()
  },
  props: {
    classMValue: {
      type: Number,
      default: undefined
    },
    params: {
      type: Object,
      default: () => {
        return {
          edit: false,
          packageId: ''
        }
      }
    }
  },
  computed: {
  },
  methods: {
    // 编辑、复制获取数据
    getData () {
      const data = {
        packageId: this.packageId
      }
      editCopy(data).then(res => {
        if (res.code === '1') {
          const info = {
            model: res.data.classMode,
            affiliation: res.data.divisionId,
            status: res.data.isActive,
            highClass: res.data.isHighEndClass,
            lowClass: res.data.isLowPriceClass,
            lowest: res.data.lowPrice,
            autoDate: res.data.openTime,
            learnMoney: res.data.originalPrice,
            service: res.data.originalPrice,
            attr: res.data.packageAttribute,
            packageId: this.packageId,
            name: res.data.packageName,
            kcType: res.data.packageTypeId,
            cpType: res.data.productType,
            forSale: res.data.sellPrice,
            sort: res.data.sort,
            channel: [],
            directory: []
          }
          res.data.saleChannelType && res.data.saleChannelType.split(',').forEach(item => {
            info.channel.push(Number(item))
          })
          info.directory[0] = res.data.directoryId
          info.directory[1] = res.data.examId
          info.directory[2] = res.data.subjectId
          info.directory[3] = res.data.fourExamId
          info.directory[4] = res.data.fiveExamId
          info.directory[5] = res.data.sixExamId
          info.directory = info.directory.filter(item => {
            return item !== 0
          })
          this.queryParam = info
          this.getType()
          // localStorage.setItem('info', JSON.stringify(info))
          if (res.data.studyRelationDTOS && res.data.studyRelationDTOS.length !== 0) {
            localStorage.setItem('learning', JSON.stringify(res.data.studyRelationDTOS))
          }
          if (res.data.courseServiceRelationDTOS && res.data.courseServiceRelationDTOS.length !== 0) {
            localStorage.setItem('learning', JSON.stringify(res.data.courseServiceRelationDTOS))
          }
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 限制排序只能输入数字
    numbers () {
      this.queryParam.sort = this.queryParam.sort.replace(/\D/g, '')
    },
    // 禁止当前日期之前
    disabledDate (current) {
      return current && current < moment().endOf('day')
    },
    // 时间格式化
    dateTime () {
      this.queryParam.autoDate = moment(this.queryParam.autoDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 切换上课模式
    modelChange (e) {
      this.$refs.ruleForm.resetFields()
      this.queryParam.autoDate = null
      this.queryParam.model = e.target.value
      this.$emit('modeInfo', e.target.value)
    },
    // 下一步
    nextStep () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          localStorage.setItem('info', JSON.stringify(this.queryParam))
          this.$emit('nextStep')
        } else {
          return false
        }
      })
    },
    // 获取所属机构
    getAffiliation () {
      affiliation({}).then(res => {
        if (res.code === '1') {
          this.affiliationList = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级-六级
    loadData (selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    },
    // 获取课程类型
    getType () {
      if (!this.queryParam.directory[1]) {
        return false
      }
      if (this.oldExamId === this.queryParam.directory[1]) {
        return false
      }
      const data = {
        examId: this.queryParam.directory[1]
      }
      goodsType(data).then(res => {
        if (res.code === '1') {
          this.typeList = res.data
          this.oldExamId = this.queryParam.directory[1]
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.infomation {
  .tip-name {
    .ant-col-6 {
      width: 50%;
      input {
        width: 50%;
        margin-right: 10px;
      }
      .tip {
        color: rgba(255, 51, 24, 0.764705);
      }
    }
  }
}
</style>
